<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页三</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../mini/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../mini/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../../mini/css/public.css" media="all">
	<link rel="stylesheet" href="../../component/pear/css/pear.css" >
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }
		body{
			background: white;
		}
		
		    .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
		    .icon {margin-right:10px;color:#1aa094;}
		    .icon-cray {color:#ffb800!important;}
		    .icon-blue {color:#1e9fff!important;}
		    .icon-tip {color:#ff5722!important;}
		    .layuimini-qiuck-module {text-align:center;margin-top: 10px}
		    .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
		    .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
		    .welcome-module {width:100%;height:210px;}
		    .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
		    .panel-body {padding:10px}
		    .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
		    .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
		    .layui-red {color:red}
		    .main_btn > p {height:40px;}
		    .layui-bg-number {background-color:#F8F8F8;}
		    .layuimini-notice:hover {background:#f6f6f6;}
		    /* .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;} */
		    .layuimini-notice-title,.layuimini-notice-label {
		        padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
		    .layuimini-notice-title {line-height:28px;font-size:14px;}
		    .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
		</style>

</head>
<body>
<!--<div class="layuimini-container">-->
<div class="layuimini-main">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md4">

            <div class="layui-card top-panel">
                <div class="layui-card-header">评论数最多-油耗</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            4,335
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a style="color: #1aa094">▲0.12</a><br>
                            比七日 <a style="color: #bd3004">▼0.06</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md4">

            <div class="layui-card top-panel">
                <div class="layui-card-header">评论数最少-外观</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            3,280
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a style="color: #1aa094">▲0.12</a><br>
                            比七日 <a style="color: #bd3004">▼0.06</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
		<div class="layui-col-xs12 layui-col-md4">
		
		    <div class="layui-card top-panel">
		        <div class="layui-card-header">评论变化率最大-操控</div>
		        <div class="layui-card-body">
		            <div class="layui-row layui-col-space5">
		                <div class="layui-col-xs9 layui-col-md9 top-panel-number">
		                    0.3
		                </div>
		                <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
		                    比昨天 <a style="color: #1aa094">▲0.12</a><br>
		                    比七日 <a style="color: #bd3004">▼0.06</a>
		                </div>
		            </div>
		        </div>
		    </div>
		
		</div>
      
   
    </div>

	
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md6">
            <!-- <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div> -->
			
			<div class="layui-card">
				<div class="layui-card-body">
					<form class="layui-form" action="">
						<div class="layui-form-item">
							<div class="layui-form-item layui-inline">
								<label class="layui-form-label">用户</label>
								<div class="layui-input-inline">
									<input type="text" name="realName" placeholder="" class="layui-input" size="10">
								</div>
							</div>
							<div class="layui-form-item layui-inline">
								<label class="layui-form-label">性别</label>
								<div class="layui-input-inline">
									<input type="text" name="realName" placeholder="" class="layui-input">
								</div>
								<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
									<i class="layui-icon layui-icon-search"></i>
									查询
								</button>
							</div>
							<!-- <div class="layui-form-item layui-inline">
								<label class="layui-form-label">邮箱</label>
								<div class="layui-input-inline">
									<input type="text" name="realName" placeholder="" class="layui-input">
								</div>
							</div> -->
							<!-- <div class="layui-form-item layui-inline"> -->
								<!-- <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
									<i class="layui-icon layui-icon-search"></i>
									查询
								</button> -->
								<!-- <button type="reset" class="pear-btn pear-btn-md">
									<i class="layui-icon layui-icon-refresh"></i>
									重置
								</button> -->
							<!-- </div> -->
						</div>
					</form>
				</div>
			</div>
			<div class="layui-card">
				<div class="layui-card-body">
					<table id="role-table" lay-filter="role-table"></table>
				</div>
			</div>
        </div>
		

        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-pies" style="background-color:#ffffff;min-height:430px;padding: 10px;border:1px solid #f2f2f2;border-radius:5px"></div>
        </div>
    </div>

</div>
<!--</div>-->


<script type="text/html" id="role-toolbar">
	<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
			<i class="layui-icon layui-icon-add-1"></i>
			新增
	</button>
	<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
			<i class="layui-icon layui-icon-delete"></i>
			删除
	</button>
</script>
		
<script type="text/html" id="role-bar">
	<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
	<button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="power"><i class="layui-icon layui-icon-vercode"></i></button>
	<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>
		
<script type="text/html" id="role-enable">
	<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ d.id == 10003 ? 'true' : 'false' }}">
</script>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script src="../../mini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../mini/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer', 'echarts','table','form','jquery'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;
			
			let table = layui.table;
			let form = layui.form;
					
			let MODULE_PATH = "operate/";
					
			let cols = [
			    [
			        {type:'checkbox'},
			        {title: '角色名', field: 'roleName', align:'center', width:100},
			        {title: 'Key值', field: 'roleCode', align:'center'},
			        {title: '描述', field: 'details', align:'center'},
			        {title: '是否可用', field: 'enable', align:'center', templet:'#role-enable'},
			        {title: '操作', toolbar: '#role-bar', align:'center', width:195}
			    ]
			]
			
			
			table.render({
			    elem: '#role-table',
			    url: '../../admin/data/role.json',
			    page: true ,
			    cols: cols ,
			    skin: 'line',
			    toolbar: '#role-toolbar',
			    defaultToolbar: [{
					title: '刷新',
			        layEvent: 'refresh',
			        icon: 'layui-icon-refresh',
			    }, 'filter', 'print', 'exports']
			});
					
			table.on('tool(role-table)', function(obj){
			    if(obj.event === 'remove'){
			        window.remove(obj);
			    } else if(obj.event === 'edit'){
			        window.edit(obj);
			    } else if(obj.event === 'power'){
			        window.power(obj);
			    }
			});
					
			table.on('toolbar(role-table)', function(obj){
			    if(obj.event === 'add'){
			        window.add();
			    } else if(obj.event === 'refresh'){
			        window.refresh();
			    } else if(obj.event === 'batchRemove'){
			        window.batchRemove(obj);
			    }
			});
					
			form.on('submit(role-query)', function(data){
			    table.reload('role-table',{where:data.field})
			    return false;
			});
					
			form.on('switch(role-enable)', function(obj){
			    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
			});
					
			window.add = function(){
			    layer.open({
			        type: 2,
			        title: '新增',
			        shade: 0.1,
			        area: ['500px', '400px'],
			        content: MODULE_PATH + 'add.html'
			    });
			}
					
			window.power = function(obj){
			    layer.open({
			        type: 2,
			        title: '授权',
			        shade: 0.1,
			        area: ['320px', '400px'],
			        content: MODULE_PATH + 'edit.html'
			    });
			}
					
			window.edit = function(obj){
			    layer.open({
			        type: 2,
			        title: '修改',
			        shade: 0.1,
			        area: ['500px', '400px'],
			        content: MODULE_PATH + 'edit.html'
			    });
			}
					
			window.remove = function(obj){
			    layer.confirm('确定要删除该角色', {icon: 3, title:'提示'}, function(index){
			        layer.close(index);
			        let loading = layer.load();
			        $.ajax({
			            url: MODULE_PATH+"remove/"+obj.data['roleId'],
			            dataType:'json',
			            type:'delete',
			            success:function(result){
			                layer.close(loading);
			                if(result.success){
			                    layer.msg(result.msg,{icon:1,time:1000},function(){
			                        obj.del();
			                    });
			                }else{
			                    layer.msg(result.msg,{icon:2,time:1000});
			                }
			            }
			        })
			    });
			}
					
			window.batchRemove = function(obj){
			    let data = table.checkStatus(obj.config.id).data;
			    if(data.length === 0){
			        layer.msg("未选中数据",{icon:3,time:1000});
			        return false;
			    }
			    let ids = "";
			    for(let i = 0;i<data.length;i++){
			        ids += data[i].userId+",";
			    }
			    ids = ids.substr(0,ids.length-1);
			    layer.confirm('确定要删除这些用户', {icon: 3, title:'提示'}, function(index){
			        layer.close(index);
			        let loading = layer.load();
			        $.ajax({
			            url: MODULE_PATH+"batchRemove/"+ids,
			            dataType:'json',
			            type:'delete',
			            success:function(result){
			                layer.close(loading);
			                if(result.success){
			                    layer.msg(result.msg,{icon:1,time:1000},function(){
			                        table.reload('user-table');
			                    });
			                }else{
			                    layer.msg(result.msg,{icon:2,time:1000});
			                }
			            }
			        })
			    });
			}
					
			window.refresh = function(){
			    table.reload('role-table');
			}

        /**
         * 玫瑰图表
         */
        var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
        var optionPies = {
            title: {
                text: '各主题评论数',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['油耗', '空间', '动力', '操控', '舒适性','内饰','外观']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    roseType: 'radius',
                    data: [
                        {value: 4335, name: '油耗'},
                        {value: 4010, name: '空间'},
                        {value: 3634, name: '动力'},
                        {value: 4315, name: '操控'},
                        {value: 3868, name: '舒适性'},
						{value: 3600, name: '内饰'},
						{value: 3280, name: '外观'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        echartsPies.setOption(optionPies);



        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
</body>
</html>
